/*
    * @module:views/budget/investBudget/incomeBudget
    * @author:zengfx
    * @date:2020-12-16
    * 收入预算
*/
<template>
  <div class="incomeBudget_container">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">收入预算</div>
      </div>
    </div>
    <div>
      <el-form :inline="true" :model="form" label-width="60px">
        <el-form-item label="区域">
          <dx-cascader :area_id.sync="form.areaId" :maxLevel="2" />
        </el-form-item>
        <el-form-item label="账期:">
          <el-date-picker size="mini" v-model="form.acctMonth" value-format="yyyyMM" type="month" placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item label="专业:">
          <el-select v-model="form.indexCode">
              <el-option v-for="(it, i) in codeList" :key="i" :label="it.indexName" :value="it.indexCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="handle_search()">查询</el-button>
          <el-button size="mini" type="orange" @click="handle_export()">导出</el-button>
        </el-form-item>
        <!-- <el-form-item class="fr">
          <span>单位：万元</span>
        </el-form-item> -->
      </el-form>
      <!-- <p class="unit"></p> -->
      <p class="g-unit">单位: 万元</p>
      <div class="tableBox">
        <el-table
          height="65vh"
          id="table"
          size="mini"
          :header-cell-style="{ background: '#eef1f6' }"
          :data="tableData"
          v-loading="tableLoading"
          style="width: 100%;"
          border
        >
          <el-table-column label="区域" prop="areaName"></el-table-column>
          <el-table-column label="去年累计" align="center">
            <el-table-column label="年度收入预算" prop="lastYearBudget"></el-table-column>
            <el-table-column label="收入完成" prop="lastYearLjIncome"></el-table-column>
            <el-table-column label="收入预算完成比" prop="lastYearCompleteYearBudget"></el-table-column>
          </el-table-column>
          <el-table-column label="本年累计" align="center">
            <el-table-column label="年度收入预算" prop="thisYearBudget"></el-table-column>
            <el-table-column label="收入完成" prop="thisYearLjIncome"></el-table-column>
            <el-table-column label="收入预算完成比" prop="thisYearCompleteYearBudget"></el-table-column>
            <el-table-column label="同比增量收入" prop="thisYearTbYearIncreaseAmt"></el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { $budgetAPI } from '@/api/';
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from '@/common/js/storage';
const exportUrl = prefixAPI.pack;
export default {
    data() {
        return {
            form: {
                areaId: '',
                acctMonth: '',
                indexCode: ''
            },
            accountInfo: null,
            tableLoading: false,
            tableData: [],
            codeList: [],
        };
    },
    mounted() {
        this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
        this.form.areaId = this.accountInfo.areaId;
        this.getInitData();
    },
    methods: {
        handle_search() {
            this.getIncomeBudgetData();
        },
        // 获取月份
        getIncomeBudgetMaxMonth() {
            return new Promise(resolve => {
                $budgetAPI.getIncomeBudgetMaxMonth(
                    {
                        areaId: this.form.areaId
                    },
                    res => {
                        if (res.code == 0) {
                            resolve(res.content);
                        }
                    },
                    err => {
                        console.log(err);
                    }
                );
            });
        },
        getIncomeBudgetData() {
            this.tableLoading = true;
            $budgetAPI.getIncomeBudgetData(
                this.form,
                res => {
                    if (res.code == 0) {
                        res.content.dataList.map(it => { 
                            it.lastYearCompleteYearBudget = it.lastYearCompleteYearBudget ? it.lastYearCompleteYearBudget + '%': '';
                            it.thisYearCompleteYearBudget = it.thisYearCompleteYearBudget ? it.thisYearCompleteYearBudget + '%': '';
                        })

                        this.tableData = res.content.dataList;
                    }
                    this.tableLoading = false;
                },
                err => {
                    this.tableLoading = false;
                }
            );
        },
        async getInitData() {
            let that = this;
            that.form.acctMonth = await that.getIncomeBudgetMaxMonth();
            that.codeList = await that.getCodeList();
            that.form.indexCode = that.codeList[0].indexCode;
            that.getIncomeBudgetData();
        },
        getCodeList () {
          var that = this;

          return new Promise(resolve=> {
              $budgetAPI.getIncomeBudgetType({},res => {
                  if(res.code == 0) {
                      resolve(res.content);
                  }else {
                    resolve([]);
                  }
              })
          })
        },
        handle_export() {
            var areaId = this.form.areaId,
                month = this.form.acctMonth,
                code = this.form.indexCode, 
                token = getCookie("token");
            
            window.open(`${exportUrl}/incomeBudget/exportIncomeBudgetData?areaId=${areaId}&acctMonth=${month}&indexCode=${code}&token=${token}`, "_self");
        }
    }
};
</script>

<style lang="scss" scoped>
.incomeBudget_container {
    /deep/ .el-form-item {
        margin-bottom: 0;
    }
}
</style>